<template>
  <div class="main-container">
    <ul>
      <li v-for="(item,index) in lists" :key="index">
        <router-link :to="item.link"><p><img v-lazy="require('../../assets/img/img-find/' + item.img)" /></p></router-link>
        <p>{{item.title}}</p>
      </li>      
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'FindIndex',
  data() {
    return {
      img: 'banner-a01.png',
      lists: [
        {
          img: 'banner-a01.png',
          title: '618年中大促预热',
          link: '/find/findHealth'
        },
        {
          img: 'banner-a02.jpg',
          title: '母亲节宝妈测试',
          link: '/find/findMother'
        },
        {
          img: 'banner-a03.jpg',
          title: '双十一玩票大的',
          link: '/'
        },
        {
          img: 'banner-a04.jpg',
          title: '双十二年终盛典',
          link: '/'
        }
      ]
    }
  },
  components: {},
  methods: {},
  mounted() {}
}
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  text-align: left;
  padding-bottom: 45px;
  ul {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
    li {
      border-radius: 6px;
      margin-bottom: 16px;
      p {
        font-size: 14px;
        line-height: 24px;
      }
    }
    img {
      width: 100%;
      border-radius: 6px;
    }
  }
}
</style>
